import React, { memo } from 'react'
import { Button, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons'
// import classNames from 'classnames'
// 引入类型：
import type { ReactNode } from 'react'
import { NavLink } from 'react-router-dom'
import { HeaderWrapper } from './style'
import headerTitle from '../../assets/data/header_titles.json'

interface IProps {
	children?: ReactNode
}

// 对组件进行类型定义，FC 表示函数式组件（即：FunctionComponents）
const AppHeader: React.FC<IProps> = () => {
	const titleElementFn = (item: any) => {
		if (item.type === 'path') {
			return (
				<NavLink
					to={item.link}
					key={item.link}
					className={({ isActive }) => {
						return isActive ? 'title-active' : undefined
					}}
				>
					{item.title}
				</NavLink>
			)
		} else {
			return (
				<a href={item.link} key={item.link} target="_blank" rel="noreferrer">
					{item.title}
				</a>
			)
		}
	}

	return (
		<div>
			<HeaderWrapper>
				<div className="content">
					<div className="logo">网易云音乐logo</div>
					<div className="title-list">
						<div className="title-item">
							{headerTitle.map((item: any) => {
								return titleElementFn(item)
							})}
						</div>
					</div>
					<div className="titleRight">
						<Input
							className="searchInput"
							placeholder="音乐/视频/电台/用户"
							prefix={<SearchOutlined />}
						/>
						<Button className="createCenter">创作者中心</Button>
						<Button className="login">登录</Button>
					</div>
				</div>
			</HeaderWrapper>
		</div>
	)
}

export default memo(AppHeader)
